<template>
  <div>
    <a-modal
      title="任务预览"
      :width="450"
      :visible="visible"
      :footer="null"
      @cancel="handleCancel"
    >
      <div class="text-t">{{ parentChildTasksInfo.title }}</div>
      <div class="text-s">
        <span class="mg-r">{{ parentChildTasksInfo.className }}</span>
        <span class="mg-r">{{ parentChildTasksInfo.createdUser }}</span>
        <span class="mg-r">{{ parentChildTasksInfo.startDate }}</span>
        <span class="mg-r">剩余{{ parentChildTasksInfo.daysRemaining }}天</span>
      </div>
      <a-divider />
      <div class="text-t">任务介绍</div>
      <div class="text-s">
        <span class="mg-r">
          {{ parentChildTasksInfo.taskIntroduction }}
        </span>
      </div>
      <a-divider />
      <div class="text-t">
        班级完成情况/ {{ recodeList.length }}人已参加
      </div>
      <div
        v-for="item in recodeList"
        :key="item.id"
      >
        <div>
          <img :src="item.avatar"><span style="color:#02A7F0">{{ item.createUserName }}</span>
        </div>
        <div class="mg-l"><span>{{ item.content }}</span></div>
        <div class="mg-l"><img
          class="img-item"
          v-for="(v, index) in imgList"
          :key="index"
          :src="v"
        ></div>
        <div class="mg-l">{{ item.createdTime }}</div>
        <a-divider />
      </div>
    </a-modal>
  </div>
</template>

<script>
import {postPreview} from '@/api/modular/garden/parentchildtasks'
import moment from 'moment';
export default {
  data() {
    return {
      visible: false,
      parentChildTasksInfo:{},
      recodeList:[],
      imgList:[],
      imgTitle:''
    }
  },
  mounted(){
    this.imgTitle = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id=';
  },
  methods:{
    preview(record){
      this.visible = true
      postPreview(record.id).then(res=>{
        const {code,data} = res
        if(code==200){
          this.parentChildTasksInfo=data.parentChildTasksInfo
          this.parentChildTasksInfo.startDate=moment().format('YYYY-MM-DD')
          this.recodeList = data.recodeList===null? [] : data.recodeList
          // Avatar
          this.recodeList.forEach(item=>{
            item.avatar = this.imgTitle + item.parentImgId
          })
          this.recodeList.forEach(item => {
            if(item.images){
              this.imgList = item.images.map(item=>{
                return this.imgTitle + item.filedId
              })
            }
          })
        }
      })
    },
    handleCancel () {
        this.visible = false
      },
  }
}
</script>

<style lang="less" scoped>
.text-t{
  margin-bottom: 20px;
  font-weight: 800;
  font-size: 16px;
}
.mg-r{
  margin-right: 20px;
}

.mg-l{
  margin-left: 25px;
}
.img-item{
  width: 100px;
  margin: 10px 0;
}
</style>